<template>
	<header>
		<span class="logo">
        <el-button @click="changeTheme('default')">默认主题</el-button>
        <el-button @click="changeTheme('dark')">深色主题</el-button>
    
        <el-button type="primary">测试按钮</el-button>
		</span>
		<span class="user-box">
			<i class="iconfont icon-user"></i>
			<el-dropdown placement="bottom">
				<span>{{ store.username }}</span>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item @click="handleLogout">注销</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</span>
	</header>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { useStore } from '@/store';
import router from '@/router';
const store = useStore();

const currentTheme = ref('default'); // 当前主题

// 动态切换主题
const changeTheme = (theme:string) => {
  currentTheme.value = theme;

  // 移除旧的 CSS 链接
  const oldLink = document.querySelector('link[rel="stylesheet"][title]');
  if (oldLink) {
    oldLink.remove();
  }

  // 动态添加新的 CSS 链接
  const link = document.createElement('link');
  link.setAttribute('rel', 'stylesheet');
  link.setAttribute('type', 'text/css');
  link.setAttribute('title', 'dynamic-theme'); // 标记链接以便后续移除

  if (theme === 'default') {
    link.href = 'https://unpkg.com/element-plus/theme-chalk/index.css';
    document.documentElement .classList.remove('dark'); // 切换到深色主题后添加 class
  } else if (theme === 'dark') {
    link.href = 'https://unpkg.com/element-plus/theme-chalk/dark/css-vars.css';
    document.documentElement.className = 'dark'; // 切换到深色主题后添加 class
  }

  document.head.appendChild(link);
};

// 退出
const handleLogout = () => {
	sessionStorage.removeItem('username');
	router.push('/login');
}
</script>

<style lang="less" scoped>
header {
	height: 56px;
	// background-color: #f5f5f5;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 24px;
	border-bottom: 1px solid var(--el-menu-border-color);
	box-sizing: border-box;
	.user-box {
		display: flex;
		align-items: center;
		i {
			margin-right: 8px;
			color: var(--el-menu-active-color);
		}
	}
}
</style>